<template>
  <div class="wrap">
    <div class="title-container">
      <img src="../../assets/logo.png" alt="" class="logo">
      <div class="title">信用加油</div>
      <div class="subtitle">新用户注册</div>
      <div class="title-right">已有账号，现在<router-link :to="'login'" class="login">登录</router-link></div>
    </div>
    <div class="register-container">
      <el-form :model="registerForm" :rules="rules" ref="registerForm" label-width="150px" class="register-form">
        <div class="register-tip">服务须知：新用户注册的审核时限为24小时（工作日），遇法定节假日顺延。</div>
        <div class="register-header">账户信息</div>
          <el-form-item label="用户名" prop="loginname" class="register-form-item">
            <el-input v-model="registerForm.loginname"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="register-form-item">
            <el-input type="password" v-model="registerForm.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password_confirm" class="register-form-item">
            <el-input type="password" v-model="registerForm.password_confirm" auto-complete="off"></el-input>
          </el-form-item>
        <div class="register-header">公司信息</div>
          <el-form-item label="公司名称" prop="company_title" class="register-form-item">
            <el-input v-model="registerForm.company_title"></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码" prop="company_socailcode" class="register-form-item">
            <el-input v-model="registerForm.company_socailcode"></el-input>
          </el-form-item>
          <el-form-item label="法定代表人" prop="company_name" class="register-form-item">
            <el-input v-model="registerForm.company_name"></el-input>
          </el-form-item>
        <div class="register-header">联系人信息</div>
          <el-form-item label="联系人姓名" prop="usrname" class="register-form-item">
            <el-input v-model="registerForm.usrname"></el-input>
          </el-form-item>
          <el-form-item label="联系人手机" prop="mobile" class="register-form-item">
            <el-input v-model="registerForm.mobile"></el-input>
          </el-form-item>
        <div class="register-header">其他信息</div>
          <el-form-item label="平台推荐人" prop="company_referer" class="register-form-item">
            <el-input v-model="registerForm.company_referer"></el-input>
          </el-form-item>
        <el-form-item label="获知本系统的渠道" prop="company_channel" class="register-form-item">
          <el-input v-model="registerForm.company_channel"></el-input>
        </el-form-item>

        <el-form-item prop="agree">
          <el-checkbox-group v-model="registerForm.agree">
            <el-checkbox name="agree">我已同意遵守《油信通产品服务条款》及《隐私声明》</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="register-form-btn">
          <el-button type="primary" :loading="loading" @click="submitForm('registerForm')">同意并注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="copy-right">
      Copyright@2017 新华数据 All rights reserved
    </div>
  </div>
</template>

<script>
  import * as actionTypes from '../../constants/action-types'
    export default {
        name: 'SignIn',
        data() {
            var validatePass = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'));
              } else {
                if (this.registerForm.password_confirm !== '') {
                  this.$refs.registerForm.validateField('password_confirm');
                }
                callback();
              }
            };
            var validatePass2 = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            };
            return {
              registerForm: {
                 loginname: '',
                 password: '',
                 password_confirm: '',
                 company_title: '',
                 company_socailcode: '',
                 company_name: '',
                 usrname: '',
                 mobile: '',
                 company_referer: '',
                 company_channel: '',
                 agree: [],
              },
              rules:{},
              rules: {
                loginname : [
                  { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password : [
                  { required: true, validator: validatePass, trigger: 'blur' }
                ],
                password_confirm : [
                  { required: true, validator: validatePass2, trigger: 'blur' }
                ],
                company_title : [
                  { required: true, message: '请输入公司名称', trigger: 'blur' }
                ],
                company_socailcode : [
                  { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
                ],
                company_name : [
                  { required: true, message: '请输入法定代表人', trigger: 'blur' }
                ],
                usrname : [
                  { required: true, message: '请输入联系人姓名', trigger: 'blur' }
                ],
                mobile : [
                  { required: true, message: '请输入联系人手机', trigger: 'blur' }
                ],
                agree : [
                  { type: 'array', required: true, message: '您必须阅读并同意协议方可注册', trigger: 'change' }
                ],
              },
              loading: false,
            }
        },
        methods: {
          submitForm(formName) {
            const self = this;
            self.$refs[formName].validate((valid) => {
              if (valid) {
                self.loading= true;
                this.$store.dispatch(actionTypes.REGISTER, this.registerForm).then(()=>{
                  self.loading=false;
                  self.$alert('您已注册成功！', '信用加油', {
                    confirmButtonText: '确定',
                    callback: action => {
                      self.$router.push('/login');
                    }
                  });

                }).catch(() => {
                  self.loading = false
                })
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          }
        }
    }
</script>

<style lang="stylus" scoped>
  .wrap
    display flex
    align-items  center
    flex-direction column
  .title-container
    display: flex
    flex-direction row
    width 1024px
    .logo
      width: 90px
      height: 90px
    .title
      margin-left: 15px
      justify-content: flex-start
      align-items: center
      display flex
      font-size: 38px
      font-weight bold
    .subtitle
      margin-left: 15px
      justify-content: flex-start
      align-items: center
      display flex
      font-size: 24px
      font-weight bold
    .title-right
      display flex
      justify-content flex-end
      align-items center
      flex 1
    a
      text-decoration: none
    .login
      color: #549ef6
  .register-container
    display: flex
    flex-direction column
    width 1024px
    .register-form-item
      width 400px
      margin-left 150px
    .register-form-btn
      margin 50px 200px
    .register-tip
      display flex
      font-size 14px
      align-items center
      height 70px
    .register-header
      display flex
      background-color #F2F2F2
      align-items center
      height 35px
      padding-left 20px
      margin 10px 0

  .copy-right
    font-size: 13px
    margin-top: 15px
</style>
